<template>
  <div class="app-container">
    <div class="settle-manage">
<!--       <div class="manage-left">
        <el-label style="width: 100%;">企业列表</el-label>

        <el-tree v-if="!loading && data.list.length > 0" :data="data.list" :props="defaultProps"
          @node-click="handleNodeClick">
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span>{{ node.label }}</span>
              <el-button type="primary" size="small" circle link @click.stop="handleSettle(data)">
                <el-icon><Operation /></el-icon>
              </el-button>
            </span>
          </template>
        </el-tree>

        <div v-else-if="!loading && data.list.length === 0" class="empty-state">
          <p>暂无企业数据</p>
        </div>

      </div>
 -->
      <div class="manage-right">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="结算单汇总" name="summary">
            <SettlementSummary ref="summaryRef" />
          </el-tab-pane>
          <el-tab-pane label="结算单明细" name="detail">
            <SettlementDetail ref="detailRef" />
          </el-tab-pane>
          <el-tab-pane label="对象费用明细" name="object">
            <ObjectCostDetail ref="objectRef" />
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// import { Operation } from '@element-plus/icons-vue'
import { getEnterpriseTree, settleEnterpriseById, settleBatchEnterprise } from '@/api/settle'
import type { EnterpriseTreeNode } from '@/api/types/enterprise'
import SettlementSummary from './components/BillTotal.vue'
import SettlementDetail from './components/BillDetail.vue'
import ObjectCostDetail from './components/FeeDetail.vue'

const data = reactive({
  list: [] as EnterpriseTreeNode[]
})

const loading = ref(false)
const selectedEnterprise = ref<EnterpriseTreeNode | null>(null)
const activeName = ref('summary')
const summaryRef = ref()
const detailRef = ref()
const objectRef = ref()

const defaultProps = {
  children: 'children',
  label: 'label',
}

/* const getEnterpriseListFn = () => {
  loading.value = true
  getEnterpriseTree().then((res: any) => {
    data.list = res.data || []
  })
  .catch((err: any) => {
    ElMessage.error(err.msg || '获取企业列表失败')
    data.list = []
  })
  .finally(() => {
    loading.value = false
  })
} */

/* const handleNodeClick = (nodeData: EnterpriseTreeNode) => {  
  if (nodeData.type === 'company') {
    selectedEnterprise.value = nodeData
    
    // 通知当前激活的标签页组件更新数据
    const tabName = activeName.value
    if (tabName === 'summary' && summaryRef.value) {
      summaryRef.value.updateData(nodeData)
    } else if (tabName === 'detail' && detailRef.value) {
      detailRef.value.updateData(nodeData)
    } else if (tabName === 'object' && objectRef.value) {
      objectRef.value.updateData(nodeData)
    }
  }
} */

const handleClick = (tab: any) => {
  const tabName = tab.props.name
  activeName.value = tabName
  
/*   // 如果已选择企业，通知新激活的标签页组件更新数据
  if (selectedEnterprise.value) {
    if (tabName === 'summary' && summaryRef.value) {
      summaryRef.value.updateData(selectedEnterprise.value)
    } else if (tabName === 'detail' && detailRef.value) {
      detailRef.value.updateData(selectedEnterprise.value)
    } else if (tabName === 'object' && objectRef.value) {
      objectRef.value.updateData(selectedEnterprise.value)
    }
  } */

  if (tabName === 'summary' && summaryRef.value) {
    summaryRef.value.getList()
  } else if (tabName === 'detail' && detailRef.value) {
    detailRef.value.getList()
  } else if (tabName === 'object' && objectRef.value) {
    objectRef.value.getList()
  }
}

/* 
const handleSettle = (nodeData: EnterpriseTreeNode) => {
  let prompt = nodeData.type === 'company' ? "确定要对当前企业进行结算吗?" : "确定要对当前商户的所有企业进行批量结算吗?"
  ElMessageBox.confirm(
    prompt,
    "提示",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      if (nodeData.type === 'company') {
        settleEnterpriseById(nodeData.id)
          .then((res: any) => {
            ElMessage.success("结算成功！");
            handleNodeClick(nodeData);
          })
          .catch((err: any) => {
            console.error("err", err.msg);
            ElMessage.error("结算失败！");
          });
      } else if (nodeData.type === 'location') {
        let idList = nodeData.children.map((item: any) => item.id);
        let requestData = {
          idList: idList,
        }
        settleBatchEnterprise(requestData)
          .then((res: any) => {
            ElMessage.success("批量结算成功！");
            handleNodeClick(nodeData);
          })
          .catch((err: any) => {
            console.error("err", err.msg);
            ElMessage.error("批量结算失败！");
          });
      }
    })
    .catch((err: any) => {
      console.error("结算企业失败:", err);
    });
} */

onMounted(() => {
  // getEnterpriseListFn()
  summaryRef.value.getList()
})
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - $headerHeight - 38px - 40px);
  padding: 10px;
  margin: 10px;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.el-tree {
  margin-top: 10px;
  font-size: 12px;
}

.custom-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 8px;
  
  .el-button {
    margin-left: 8px;
  }
}

.settle-manage {
  position: relative;
  height: 100%;
  .manage-left {
    position: absolute;
    width: 160px;
    padding-right: 10px;
    border-right: 1px solid #efefef;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: scroll;
    
    .empty-state {
      text-align: center;
      padding: 20px 10px;
      color: #909399;
      font-size: 12px;
      
      p {
        margin: 0;
      }
    }
    
  }
  .manage-right {
    //margin-left: 160px;
    //padding-left: 20px;
    height: 100%;
    
    .content-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100%;
      color: #909399;
      
      h3 {
        margin: 0 0 12px 0;
        font-size: 18px;
        color: #606266;
      }
      
      p {
        margin: 0;
        font-size: 14px;
        text-align: center;
        line-height: 1.5;
      }
    }
  }
}
</style>
